import React, {useEffect, useRef} from 'react';
import {
    useSelector,// 可以获取数据状态
    useDispatch,// 可以获取dispatch
} from "react-redux";
import {getWeibo, postWeibo} from "./api/weibo";
import {upContentList} from "./store/slice/weibo";
import "./assets/style/weibo.css";

function App(props) {
    const contentRef = useRef();
    const dispatch = useDispatch();
    // 获取数据数据状态,接收的是一个函数,该函数返回的结果即是useSelector返回的结果
    const {contentList} = useSelector((state)=>{
        return state.weibo;
    });
    const addWeiboAsync = async()=>{
        const content = contentRef.current.value.trim();
        if(content.length === 0){
            alert("请输入微博内容");
            return;
        }
        await postWeibo(content);
        contentRef.current.value = null;
        getWeiboAsync();
    }
    const getWeiboAsync = async ()=>{
        const {contentList} = await getWeibo(1,30);
        dispatch(upContentList(contentList));

    }
    useEffect(()=>{
        getWeiboAsync();
    },[])
    return (
        <div className="jyArea">
            <div className="takeComment">
                <textarea ref={contentRef} name="textarea" className="takeTextField" id="tijiaoText"></textarea>
                <div className="takeSbmComment">
                    <input onClick={addWeiboAsync} type="button" className="inputs" value=""/>
                </div>
            </div>


            <div className="commentOn">
                <div className="noContent" style={{display:contentList.length===0?"block":"none"}}>暂无留言</div>
                <div className="messList">
                    {
                        contentList.map(item=>(
                            <div key={item._id} className="reply">
                                <p className="replyContent">{item.content}</p>
                                <p className="operation">
                                    <span className="replyTime">{item.addTime}</span>
                                    <span className="handle">
                                        <a href="" className="top">{item.topNum}</a>
                                        <a href="" className="down_icon">{item.downNum}</a>
                                        <a href="" className="cut">删除</a>
                                    </span>
                                </p>
                            </div>
                        ))
                    }

                </div>
                <div className="page">
                    <a href="" className="active">1</a>
                    <a href="">2</a>
                    <a href="">3</a>
                </div>
            </div>
        </div>
    );
}

export default App;